<script lang="ts">
import { defineComponent, toRaw, type PropType } from "vue";
import { upload_up } from "@/api/upload";
import { chooseMedia, previewImage, uploadWrapper } from "@/utils/meida";
import { Toast } from "@/utils/toast";

import EditMenuTitle from "./edit-menu-title.vue";
import IconClose from "@/components/icon/close.vue";
import FormUpload from "@/components/form/upload.vue";

export default defineComponent({
  components: { EditMenuTitle, IconClose, FormUpload },
  props: {
    listData: { type: Array as PropType<string[]>, required: true },
    title: String,
    required: Boolean,
    desc: String,
  },
  setup(props) {
    const imgClick = (type: "del" | "upload", index: number) => {
      if (type === "del") {
        props.listData.splice(index, 1);
      } else if (type === "upload") {
        chooseMedia(
          {
            count: 9 - props.listData.length,
            mediaType: ["image"],
          },
          (resp) => {
            Toast.showLoading();
            uploadWrapper(
              resp.map((i) => i.tempFilePath),
              (resp) => {
                props.listData.push(...resp);
                Toast.hideLoading();
              },
              (path) => {
                return upload_up(path, { type: 2 }).then((resp) => {
                  return resp.map((i) => i.url);
                });
              }
            );
          }
        );
      } else {
        previewImage(toRaw(props.listData), index);
      }
    };

    return { imgClick };
  },
});
</script>

<template>
  <view class="img-list">
    <view class="img-list-title">
      <EditMenuTitle :title="title" :required="required" />
    </view>
    <view class="img-list-desc" v-if="desc">{{ desc }}</view>
    <view class="img-list-wrapper">
      <view class="img-list-item" v-for="(i, d) of listData" :key="i">
        <image
          class="img-list-source"
          :src="i"
          mode="aspectFill"
          @click="imgClick('preview', d)"
        />
        <view class="img-list-del" @click="imgClick('del', d)">
          <IconClose size="24rpx" color="rgba(255, 255, 255, 0.8)" />
        </view>
      </view>

      <view
        class="img-list-upload"
        v-if="listData.length < 9"
        @click="imgClick('upload')"
      >
        <FormUpload />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.img-list {
  .img-list-title {
    padding-left: 30rpx;
  }

  .img-list-desc {
    margin: 10rpx 30rpx 0;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }

  .img-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
  }

  .img-list-item,
  .img-list-upload {
    width: 156rpx;
    height: 156rpx;
    margin-bottom: 20rpx;
  }

  .img-list-item {
    position: relative;
    margin-right: 20rpx;
  }

  .img-list-source {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }

  .img-list-del {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4rpx;
    border-radius: 0 20rpx 0 10rpx;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>